<template>
  <div class="bg-white" style="padding: 16px;">
    <el-button type="primary" @click="handleAdd">
      新增
    </el-button>
    <EditTable ref="tableRef" :columns="columns" :request="getTableList">
      <template #button="{ row }">
        <el-button size="small" type="text" @click="toDetail(row)">
          详情
        </el-button>
      </template>
    </EditTable>
  </div>
</template>

<script>
function getList(data) {
  const arr = [];
  for (let i = 1; i < 12; i++) {
    const names = [
      "入学早知道数据库",
      "数仓数据处理",
      "公共数据平台-rds",
      "绿贷通应用库",
    ];
    const index = i % names.length;
    arr.push({
      id: i,
      name: names[index],
      host: `194.1.2.235.152${i}`,
      count: i,
      status: i % 2 === 0 ? 1 : 0,
    });
  }
  const { pageNum, pageSize } = data;
  const start = (pageNum - 1) * pageSize;
  const end = start + pageSize;
  const list = arr.slice(start, end);
  return new Promise(resolve => {
    const result = {
      code: 200,
      data: {
        list,
        total: arr.length
      }
    };
    resolve(result);
  });
}

export default {
  components: {},
  data() {
    return {
      columns: [
        {
          label: "数据库名称",
          prop: "name",
          valueType: "input",
          rules: [
            { required: true, message: "请输入活动名称", trigger: "blur" }
          ]
        },
        {
          label: "主机:端口",
          prop: "host",
          valueType: "input"
        },
        {
          label: "告警次数",
          prop: "count",
          valueType: "input"
        },
        {
          label: "状态",
          prop: "status",
          valueType: "select",
          options: [
            { label: "启用", value: 1 },
            { label: "禁用", value: 0 }
          ]
        },
        {
          label: "操作",
          prop: "operation",
          width: 180,
        }
      ],
    };
  },
  methods: {
    async getTableList(params) {
      return getList(params).then((res) => res.data)
    },
    handleAdd() {
      this.$refs.tableRef.addData();
    },
    toDetail(row) {
      console.log('row: ', row);
     }
  }
};
</script>

<style></style>
